<html>

<head>
    <style>
        * {
            margin: 0;
            box-sizing: border-box;
        }

        canvas {
            outline: 1px solid #000;
        }

        .action {
            position: absolute;
        }
    </style>

</head>

<body>
    <div class="action">
        <input type="number" id="brush" placeholder="请输入笔刷的宽高">
        <button id="move">移动</button>
    </div>
    <canvas id="canvas" width="1920" height="1080"></canvas>
    <script type="application/javascript">

        const brushEl = document.getElementById('brush')
        var canvas = document.getElementById("canvas");
        var move = document.getElementById("move");
        var ctx = canvas.getContext("2d");
        let brushWidth = 5;
        canvas.width = innerWidth
        canvas.height = innerHeight
        let arr = []

        function draw() {
            arr.forEach(e => {
                ctx.beginPath();
                ctx.fillRect(e.x, e.y, brushWidth, brushWidth)
                ctx.stroke();
            })
        }
        canvas.addEventListener('mousedown', (de) => {
            let mousemove = (me) => {
                arr.push({ x: me.x, y: me.y })
                draw()
            }
            canvas.addEventListener('mousemove', mousemove)
            canvas.addEventListener('mouseup', () => {
                canvas.removeEventListener('mousemove', mousemove)
            })
        })

        const render = () => {
            brushEl.value = brushWidth
        }

        brushEl.addEventListener('input', () => {
            brushWidth = brushEl.value
        })
        render()
        move.onclick = () => {
            console.log('====');

            setInterval(() => {
                ctx.clearRect(0, 0, innerWidth, innerHeight);
                arr.forEach(e => {
                    e.x++
                    e.y++
                })
                draw()
            }, 100)
        }

    </script>
</body>

</html>